<!--
 * @Descripttion: 
 * @version: 
 * @Author: ada.wu
 * @Date: 2023-11-25 15:05:03
 * @LastEditors: ada.wu
 * @LastEditTime: 2023-12-06 12:51:45
-->
<template>
  <div class="mt-2">
    <el-pagination background v-model:currentPage="paginationOption.page" v-model:page-size="paginationOption.limit" :page-sizes="paginationOption.pageSizes" :background="false" :layout="paginationOption.layout" :total="paginationOption.totalCount" @size-change="handleChangeSize" @current-change="handleChangeCurrent" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
const emit = defineEmits(['handleChange']);


// 分页栏配置数据
const paginationOption = ref({
  layout: 'total, sizes, prev, pager, next, jumper',
  pageSizes: [10, 20, 50],
  totalCount: 0,
  limit: 10,
  page: 1,
})



// 设置分页
const changeTotal = (data) => {
  paginationOption.value.totalCount = data?.totalCount;
}


// 处理分页尺寸
const handleChangeSize = (val) => {
  console.log(`${val} items per page`);
  paginationOption.value.page = 1;
  paginationOption.value.limit = val;
  emit('handleChange', {
    page: paginationOption.value.page,
    limit: paginationOption.value.limit,
  })
}

// 处理页码
const handleChangeCurrent = (val) => {
  console.log(`current page: ${val}`)
  paginationOption.value.page = val;
  emit('handleChange', {
    page: paginationOption.value.page,
    limit: paginationOption.value.limit,
  })
}
defineExpose({
  changeTotal,
})
</script>